<?php
include 'logic_layer.php';

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "pt") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Personality Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Questionnaire -->
        <link href="questionnaire.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps ">
                    <p class="steps-done">Welcome &#10140; Outline &#10140; </p>
                    <p class="step-current">Personality Test</p>
                    <p class="steps-pending"> &#10140; IFTTT Tutorial &#10140; Creating a Recipe &#10140; Questionnaire</p>
                </div>
            </div>
        </div>

        <!-- Part 1: Wrap all page content here -->
        <!-- Begin page content -->
        <div class="container">
            <div class="page-header">
                <h1>Personality Test</h1>
            </div>

            <p class="lead">Please answer the following questions as they best describe your personality.</p>

            <form class="form-horizontal" role="form" action='index.php' method='post' name='frm' id='frm'>
                <p class="qsectiontitle">I see myself as someone who...</p>
                <script>
                    var shuffle = function(array) {
                        var currentIndex = array.length, temporaryValue, randomIndex;

                        // While there remain elements to shuffle...
                        while (0 !== currentIndex) {

                            // Pick a remaining element...
                            randomIndex = Math.floor(Math.random() * currentIndex);
                            currentIndex -= 1;

                            // And swap it with the current element.
                            temporaryValue = array[currentIndex];
                            array[currentIndex] = array[randomIndex];
                            array[randomIndex] = temporaryValue;
                        }

                        return array;
                    }

                    var questions = [
                        "1 ...Is talkative",
                        "2 ...Tends to find fault with others ",
                        "3 ...Does a thorough job ",
                        "4 ...Is depressed, blue",
                        "5 ...Is original, comes up with new ideas",
                        "6 ...Is reserved",
                        "7 ...Is helpful and unselfish with others",
                        "8 ...Can be somewhat careless",
                        "9 ...Is relaxed, handles stress well",
                        "10 ...Is curious about many different things",
                        "11 ...Is full of energy",
                        "12 ...Starts quarrels with others",
                        "13 ...Is a reliable worker",
                        "14 ...Can be tense",
                        "15 ...Is ingenious, a deep thinker",
                        "16 ...Generates a lot of enthusiasm",
                        "17 ...Has a forgiving nature",
                        "18 ...Tends to be disorganized",
                        "19 ...Worries a lot",
                        "20 ...Has an active imagination",
                        "21 ...Tends to be quiet",
                        "22 ...Is generally trusting",
                        "23 ...Tends to be lazy",
                        "24 ...Is emotionally stable, not easily upset",
                        "25 ...Is inventive",
                        "26 ...Has an assertive personality",
                        "27 ...Can be cold and aloof",
                        "28 ...Perseveres until the task is finished",
                        "29 ...Can be moody",
                        "30 ...Values artistic, aesthetic experiences",
                        "31 ...Is sometimes shy, inhibited",
                        "32 ...Is considerate and kind to almost everyone",
                        "33 ...Does things efficiently",
                        "34 ...Remains calm in tense situations",
                        "35 ...Prefers work that is routine",
                        "36 ...Is outgoing, sociable",
                        "37 ...Is sometimes rude to others",
                        "38 ...Makes plans and follows through with them",
                        "39 ...Gets nervous easily",
                        "40 ...Likes to reflect, play with ideas",
                        "41 ...Has few artistic interests",
                        "42 ...Likes to cooperate with others",
                        "43 ...Is easily distracted",
                        "44 ...Is sophisticated in art, music, or literature",
                        "45 ...Don't answer this if you are reading the questions",
                        "46 ...Please do not answer this question",
                    ]


                    shuffle(questions);

                    for (var i = 0; i < questions.length; i++) {
                        var questionStr = questions[i].substr(questions[i].indexOf(" ") + 1);
                        var questionNumber = parseInt(questions[i].substr(0, questions[i].indexOf(" ")));
                        //mind cheater question
                        if (questionNumber >= 45) {
                            document.write('<div class="question" id="q' + questionNumber + '">');
                        } else {
                            document.write('<div class="question compulsory" id="q' + questionNumber + '">');
                        }

                        document.write('<p>' + questionStr + '</p>');
                        document.write('<div class="scale-rate">');
                        document.write('<label for="inputQ' + questionNumber + '">Strongly Disagree</label>');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="1" title="1">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="2" title="2">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="3" title="3">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="4" title="4">');
                        document.write('<input type="radio" name="inputQ' + questionNumber + '" value="5" title="5">');
                        document.write('<label for="inputQ' + questionNumber + '">Strongly Agree</label>');
                        document.write('</div></div>');
                    }

                </script>

                <!-- --------- -->
                <input type="hidden" value="tutorial" name="step" />
            </form>
            <hr>

            <div id="unanswered" class="alert alert-error">
                Please answer all of the questions.
            </div>

            <br>
            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue</button>
            <br>
            <br>

        </div>


        <!-- Le javascript
        ================================================== -->
        <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
        <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/bootbox/bootbox.min.js"></script>

        <script>
                var highlightUnanswered = function() {
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function() {
                        var input = $(this);
                        var name = input.attr("name");
                        //reset background color
                        input.parent().parent().attr("class", "question compulsory");
                        if (!$("input[name='" + name + "']:checked").val()) {
                            input.parent().parent().attr("class", "question compulsory alert-error");
                        }

                    });
                }

                var submitForm = function() {
                    //add questions inputs
                    $('.question').each(function() {
                        //question                
                        var question = $(this).children(':first-child').html();
                        $('#frm').append('<input type="hidden" name="question_' + $(this).attr("id") + '" value="' + question + '" />');
                        //question type
                        var questionType = $(this).children(':first-child').next().attr('class');
                        $('#frm').append('<input type="hidden" name="question_type_' + $(this).attr("id") + '" value="' + questionType + '" />');
                    });
                    //submit form
                    $('#frm').submit();
                }

                var continueStudy = function() {
                    $('#unanswered').hide();
                    var fieldEmpty = false;
                    //scale rate and checkbox and multiple choices
                    $('.compulsory input[name*="inputQ"]').each(function() {
                        var input = $(this);
                        var name = input.attr("name");
                        if (!$("input[name='" + name + "']:checked").val()) {
                            fieldEmpty = true;
                            console.log(name)
                        }

                    });
                    //check if any compulosy field is empty
                    if (fieldEmpty) {
                        highlightUnanswered();
                        $('#unanswered').show();
                    } else {
                        // go to the next step
                        submitForm();
                    }
                }

                $('#unanswered').hide();
        </script>
    </body>
</html>
